<template>
	<view>
		<!-- 发送私信 -->
		<u-popup v-model="isShow" mode="center" border-radius="5">
			<view class="sendMsg">
				<view class="header u-flex u-row-between u-p-l-30 u-p-r-30 u-p-t-20 u-p-b-20">
					<view class="">发送私信</view>
					<u-icon name="close" @click="close"></u-icon>
				</view>
				<view class="u-p-30"><u-input :auto-height="false" :custom-style="{ height: '180rpx' }" v-model="value" type="textarea" :border="true" /></view>
				<view class="u-p-r-30 u-p-b-30 u-text-right">
					<u-button hover-class="none" type="primary" :custom-style="{ backgroundColor: theme.bgColor, color: theme.color }" size="mini" @click="confirm">确定</u-button>
					<u-button hover-class="none" size="mini" class="u-m-l-20" @click="close">取消</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	name: 'fa-send-msg',
	props: {
		userId: {
			type: [String, Number],
			default: 0
		}
	},
	data() {
		return {
			isShow: false,
			value: ''
		};
	},
	methods: {
		show() {
			this.isShow = true;
		},
		close() {
			this.isShow = false;
		},
		//发送私信
		confirm: async function() {
			let res = await this.$api.goMessagePost({
				id: this.userId,
				content: this.value
			});
			this.$u.toast(res.msg);
			if (!res.code) {
				return;
			}
			this.close();
		}
	}
};
</script>

<style lang="less">
.sendMsg {
	width: 600rpx;
	height: 420rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	.header {
		border-bottom: 1px solid #eee;
		background-color: #f8f8f8;
	}
}
</style>
